<template>
  <div class="shopbag">
    <div class="back-nav-box">
      <back-nav left-arrow left-text="返回" title="购物袋" :right-text="flag?'完成':'编辑'" @shop-edit="toggleStatus"></back-nav>
    </div>
    <div class="scroll-box">

    <div class="image">
      <img class="auto-img" :src="imgUrl" />
    </div>
    <!-- 商品数据 -->
    <div class="shop-list">
      <div class="shop-list-box">
        <div class="search-box-item" v-for="(item,index) in shopProArray" :key="index">
          <!-- 复选框 -->
          <van-checkbox v-model="item.check" shape="round" @change="selectPro"></van-checkbox>

          <div class="item-img" @click="viewDetail(item.pid)">
            <img class="auto-img" :src="item.small_img" />
          </div>
          <div class="item-title-box">
            <div class="item-title-top">
              <div class="item-zhtitle">
                <div class="title-name">{{item.name}}</div>
                <div class="title-style">{{item.rule}}</div>
              </div>
              <div class="item-entitle">{{item.enname}}</div>
            </div>
            <div class="item-title-bot">
              <div class="item-price">¥{{item.price}}</div>
              <div class="select-box">
                <van-stepper theme="round" v-model="item.count" button-size="22" disable-input />
              </div>
            </div>
          </div>
        </div>
        <div class="shop-list-item">哎呀,没有数据可加载啦!</div>
      </div>
    </div>
    </div>

    <div class="shop-submit" v-if="!flag">
      <van-submit-bar :price="counterSum()" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checked" ref="checkbox" @click="allChecked">全选</van-checkbox>
      </van-submit-bar>
    </div>
    <div class="shop-delete" v-if="flag">
      <van-submit-bar button-text="删除选择" @submit="onSubmit">
        <van-checkbox v-model="checked" @click="allChecked">取消全选</van-checkbox>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import BackNav from "../components/BackNav.vue";
export default {
  name: "Shopbag",
  components: {
    BackNav,
  },
  data() {
    return {
      imgUrl: require("../assets/images/shopbag_bg.png"),
      //全选状态
      checked: false,
      //购物车商品数据数组
      shopProArray: [],
      //选择的商品数量
      checkNum: 0,
      //  商品条目数量
      rowsArray: 0,
      //删除选择是否显示状态
      flag: false,

      //购物车唯一标识合集
      sids:[],
     
    };
  },
  created() {
    this.findAllShopcart();
  },
  
  methods: {
    
    //假删除购物车商品
    //提交订单和删除选择
    onSubmit() {
     
     //先获取勾选的sid
     let sids = [];
     this.shopProArray.forEach(v => {
       if (v.check) {
         sids.push(v.sid);
       }
     })
    //  
    // 删除所选中的商品
      if(this.flag) {
        if(sids.length!=0) {
          this.axios({
            method: 'post',
            url: '/deleteShopcart',
            data:{
              sids: JSON.stringify(sids)
            }
          }).then(res=>{
            for(let i=0;i<this.shopProArray.length;i++ ){
              if(this.shopProArray[i].check) {
                this.shopProArray.splice(i,sids.length);
              }
            }
            this.checked=false;
            }).catch(err=>{
              
            })
        }
      }
      //提交订单
      else{
        if(sids.length!=0) {
          this.$router.push({name:'MakeOrder',params:{sids}
          })

        }
      }

    },

    //切换编辑完成 (data是BackNav组件传过来的值)
    toggleStatus(data) {
      this.flag = data;
    },
    //计算合计总价
    counterSum() {
      let price;
      let count;
      let total=0;
      this.shopProArray.forEach(v=>{
        if(v.check) {
          price=+v.price;
          count=v.count;
          total+=(price*count)*100;
        }
      })
      return total;
    },
    //单选商品方法
    selectPro() {
      for (let i = 0; i < this.shopProArray.length; i++) {       
        if (!this.shopProArray[i].check) {
          this.checked = false;
          return;
        }
      }
      this.checked = true;
      
    },

    //全选方法
    allChecked() {
      // 
      this.shopProArray.forEach((v) => {
        v.check = this.checked;
      });
    },
    // 查看商品详情
    viewDetail(pid) {
      this.$router.push({ name: "Detail", params: { pid } });
    },
    //查询用户的购物袋方法
    findAllShopcart() {
      this.axios({
        method: "get",
        url: "/findAllShopcart",
      }).then((res) => {
        // 
        //用户未登录 提醒信息
        if (res.data.code == 700) {
          this.$toast('您还未登录,请先登录');
         //跳转到登录页面 (注意将url加入js白名单中)
        }

        //成功查询所有购物车
        if (res.data.code == 5000) {
          res.data.result.forEach((v) => {
            v.check = false;
            //   
          });
          this.shopProArray = res.data.result;
          //   
        }
      });
    },

  },
};
</script>

<style lang='less' scoped>
@import url("../assets/base.less");
.shop-list-item {
  text-align: center;
  font-size: 14px;
}
.shopbag {
    background-color: #f7f7f7;
  .back-nav-box {
    position: sticky;
    top: 0;
    color: @mainColor;
  }
  padding-bottom: 50px;
  .image {
    background-color: rgb(131, 101, 60);
  }
  .scroll-box{
    height:90%;
    overflow-y: scroll;
    margin-bottom: 150px;
  }
  .shop-list {
    margin-top: 10px;

    .shop-list-box {
      margin-bottom: 5px;
    }
  }
  //提交订单定位
  /deep/ .van-submit-bar {
    bottom: 50px;
    border-bottom: 1px solid #e8e8e8;
  }
  //修改提交按钮的颜色
  .shop-submit {
    /deep/ .van-submit-bar__button--danger {
      background: linear-gradient(to right, #DFAB6F, #8B5729);
      color: #fff;
    }
  }
  //价格的字体颜色
  /deep/ .van-submit-bar__price {
    color: @priceColor;
    font-weight:bold;
  }
  .shop-delete {
    //修改删除选择的布局
    /deep/ .van-submit-bar__bar {
      justify-content: space-between;
    }
    /deep/ .van-submit-bar__button--danger {
      background-color: #ee0a24;
      color: #fff;
    }
  }

  // shoplist
  /deep/ .van-stepper--round .van-stepper__plus {
    background-color: #00aaff;
  }
  /deep/ .van-stepper--round .van-stepper__minus {
    color: #00aaff;
    border-color: #00aaff;
  }
  //购物车滚动条
  .shop-list {
    //90% 让商品显示完整,不被挡住
    height: 65%;
    overflow-y: auto;
  }
  .search-box-item {
    display: flex;
    height: 120px;
    padding: 10px 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    background-color: #fff;
    justify-content: space-evenly;
    align-items: center;
  }
  .check-box {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #aaa;
    position: relative;
  }

  .item-img {
    width: 100px;
    height: 100px;
    margin: 0 10px;
    background-color: @mainColor;
  }
  .item-title-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .item-title-top {
      margin-bottom: 25px;
      .item-zhtitle {
        display: flex;
        .title-name {
          font-size: 16px;
          margin-right: 15px;
        }
        .title-style {
          font-size: 14px;
          color: #999;
        }
      }
      .item-entitle {
        margin-top: 5px;
        font-size: 14px;
        color: #999;
      }
    }
    .item-title-bot {
      display: flex;
      justify-content: space-between;
      .item-price {
        font-size: 16px;
        color: @priceColor;
        font-weight: bold;
      }
    }
  }
}
</style>